<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello world</title>
</head>
<body onload="initWebGL()">
<canvas id="my-canvas" width="500" height="500"> There's no support for HTML5 </canvas>
</body>
<script src="libs/jquery.min.js"></script>
<script src="libs/gl-matrix-min.js"></script>
<script id="shader-vs" type="shader">
	attribute vec3 aVertexPosition;
	
	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;
	
	void main(void){
		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	}
</script>
<script id="shader-fs" type="shader">
	void main(void){
		gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
	}
</script>
<script>
	var gl = null,
		program = null;
		
	var vertices = [],
		squareIndices = [],
		triangleIndices = [],
		width = 0,
		height = 0;
	
	var squareVertexBuffer = null,
		squareIndexBuffer = null,
		triangleIndexBuffer = null;
	
	var pMatrix = mat4.create(),
		mvMatrix = mat4.create();
	
	function makeShader(src, type){
		var shader = gl.createShader(type);
		gl.shaderSource(shader, src);
		gl.compileShader(shader);
		return shader;
	}
	
	function initProgram(){
		var vs_source = document.getElementById('shader-vs').innerHTML;
		var fs_source = document.getElementById('shader-fs').innerHTML;
		
		var vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);
		var fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);
		
		program = gl.createProgram();
		gl.attachShader(program, vertexShader);
		gl.attachShader(program, fragmentShader);
		gl.linkProgram(program);
		
		if (!gl.getProgramParameter(program, gl.LINK_STATUS)){
			alert('unable to initialize the shader program.');
		}
		gl.useProgram(program);
		
		program.vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition");
		gl.enableVertexAttribArray(program.vertexPositionAttribute);
		getMatrixUniforms();
	}
	
	function setupBuffers(){
		vertices = [
			-0.5,0.5,0.0, //Vertex 0
			-0.5,-0.5,0.0, //Vertex 1
			0.5,-0.5,0.0, //Vertex 2
			0.5,0.5,0.0]; //Vertex 3
		
		squareIndices = [3,2,1,3,1,0];
		
		squareVertexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
		
		squareIndexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(squareIndices), gl.STATIC_DRAW);
		
		triangleIndices = [1, 2, 3]
		triangleIndexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(triangleIndices), gl.STATIC_DRAW);
	}
	
	function setupWebGL(){
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
		gl.viewport(0, 0, width, height);
	}
	
	function drawScene(){
		setupWebGL();
		
        mat4.perspective(45, width / height, 0.1, 100.0, pMatrix);
		mat4.identity(mvMatrix);
		mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
		//mat4.rotate(mvMatrix, 60.0*Math.PI/180.0,  [1.0, 0.0, 0.0]);
		//mat4.scale(mvMatrix, [1.0, 1.5, 0.0]);
		setMatrixUniforms();
		
		gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
		gl.vertexAttribPointer(program.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
		
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);
		gl.drawElements(gl.TRIANGLES, squareIndices.length, gl.UNSIGNED_SHORT, 0);
		
		mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
		setMatrixUniforms();
		
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexBuffer);
		gl.drawElements(gl.TRIANGLES, triangleIndices.length, gl.UNSIGNED_SHORT, 0);
	}
	
	function getMatrixUniforms(){
		program.pMatrixUniform = gl.getUniformLocation(program, "uPMatrix");
		program.mvMatrixUniform = gl.getUniformLocation(program, "uMVMatrix");
	}
	
	function setMatrixUniforms(){
		gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
		gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
	}
	
	function renderLoop(canvas){
		requestAnimationFrame(renderLoop, canvas);
		drawScene();
	}
	
	function initWebGL(){
		var canvas = document.getElementById("my-canvas");
		try
		{
			gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
			width = canvas.width;
			height = canvas.height;
		}
		catch (e){ }
		if (gl){
			initProgram();
			setupBuffers();
			
			//renderLoop(canvas);
			gl.clearColor(0.0, 0.0, 0.0, 1.0);
			gl.enable(gl.DEPTH_TEST);
		

			drawScene();
		}
		else
		{
			alert('no support');
		}
	}
</script>
</html>
